﻿Ultralight Web Development workshop
SPEAKER NOTES

Why are we here?
- ultralight devt is where APL has always shone
- web browsers are a key user interface
- but most web pages are code-heavy (eg http://www.guca.co.yu/eng/)

Why are you here?

Principles of ultralight
- software stays soft, modifiable
- code must be readable
- … concise, lucid, not repetitive
- use minimal technology
- which entails knowing it well

Ultralight methods buy us
- fast, hand-coded web pages
- good relationships with search engines
- simple generation of such pages from APL
- lightly adding a web to an application

Ultralight methods cost us
- learning 
- careful writing

Staying out of the mud
- how to recognise mud in your path

Mudpatch 1: slice and dice
- blind alley from early days of Web
- importance of graphics overestimated
- graphic designers trained for print media
- pages designed in Photoshop 
- then sliced into HTML tables (example)
- tables slow to render, heavy on code
- tables confuse search engines

Mudpatch 2: dividing the page into frames
- neat writing trick
- confuses search engines
- breaks Back button function
-- http://www.useit.com/alertbox/9612.html

Mudpatch 3: pixel perfection
- medium inherently fuzzy:
- varying window sizes
- varying sources of type (fonts)
- reasonable goal is a robust design 

Mudpatch 4: old browsers
- essential goal for large retail sites
- achievable with esoteric writing
- not achievable with lightweight methods

Mudpatch 5: encoding in anything but UTF-8
- (show examples)
- www.captainpook.com

Encoding in UTF-8
- a universal scheme for all characters…
… Cyrillic, Greek, APL, Chinese, Japanese...
- read by modern browsers
- read and written by modern text editors
- read and written by Dyalog 11.1 

Mudpatch 6: invalid markup
- otherwise known as 'tag soup'
- appears harmless, because browsers cope
- no rules govern presentation of tag soup
- your presentation rules impossible to debug

Writing lucid web pages
- the straight and narrow

Practices for writing lucid Web pages
- encode in UTF-8
- use minimal, valid markup
- abstract the presentation rules

Some editors for UTF-8
- Notepad
- Notepad2 from Flo's Freeware
- UltraEdit from IDM
- TextWrangler or BBEdit from Bare Bones Software

Web 101
- web server responds to HTTP requests
- responds with requested file
- filepath resolved in associated space
- IIS on localhost: C:\Inetpub\wwwroot\

Example 101
- http://localhost/ultra/exhibition.txt
- a text document might be all you need
- cf http://www.hixie.ch/advocacy/xhtml

Example 102
- use HTML to add structure:
- headings, paragraphs, divs
- for which we can write style rules

Example 103
- add an image
- add a link

Browser text scaling
- an accessibility requirement
- few users know or care
- but crucial to those who do
- most big sites now fairly good
- robustness across devices
- see bigchill.net, ms.com, lambenttechnology.com, canonbury.ac.uk
- body {font-size: small}
- declare other font-sizes relative
- declare lengths in ems

Web 201
- server has a sorted list of default documents
- eg index.htm index.html default.asp
- use FTP to access a remote site’s filespace
- link to stylesheet/s to share style rules

Repeated elements
- DOCTYPE
- head - but not title
- navigation menus

Programming a static site
- rebuilding www.captainpook.com
- http://localhost/pook/en/index.htm
- written by pook/system.dws
- fn: tag
- fn: page

In multiple languages
- fn: MakeAt
- Content.en.index
- encoding Japanese in ANSI?
- Content.jp.index

Web 301
- server has discretion before serving
- rules for each file extension, eg
- HTM, TXT: just serve
- PHP: pass to PHP.exe and serve result
- ASPX: pass to ASP.NET and serve result
- which might have come from a Dyalog process

Content Management Systems
- designed for administrators of large intranets
- eg Plone, Mambo, Drupl, Joomla 
- extreme separation of content, structure and style
- GUI interface for contributors
- GUI interface to organise structure, publish content
- plug-in templates for styling
- library of plugins for eg user registration
- eg heathandhampsteadsociety.org.uk
- but fine style control v hard
- but most widely used for quick, simple sites

Research: replicate dyalog.com 
- using WildServer
- .apls pages
- just enough code to map content to a template
- C:\aplserve\dyalog\content
- C:\aplserve\dyalog\default.apls
- site content map defined in 11 lines of code












Resources:
- Notepad2 from http://www.flos-freeware.ch/notepad2.html
- Jakob Nielsen on Web usability, http://www.useit.com
- HTML 4.01 specification, http://www.w3.org/TR/html401/cover.html#minitoc
- W3C Markup Validator, http://validator.w3.org/
- CSS Zen Garden, http://www.csszengarden.com/
- W3C on Cascading Style Sheets, http://www.w3.org/Style/CSS/
- A List Apart, http://www.alistapart.com/
- "Sending XHTML as text/html Considered Harmful" Ian Hickson, http://www.hixie.ch/advocacy/xhtml
- Scaleable layouts at http://lambenttechnology.com, http://www.canonbury.ac.uk

